<template>
  <div class="news">
    <div class="home-swipe">
      <mt-swipe :show-indicators="false">
        <mt-swipe-item v-for="(item,index) in swipes" :key="index">
          <div class="swipe-contnt">
            <img :src="item.img" alt="">
          </div>
        </mt-swipe-item>
      </mt-swipe>
    </div>
    <div class="home-content">
      <ul>
        <li class="contentLi" @click="newsLiClick(index)" v-for="(item,index) in lists" :key="index">
          {{item.name}}
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import { mapActions, mapState } from "vuex";
import { Toast } from "mint-ui";
export default {
  data() {
    return {
      swipes: [
        { img: "static/img/Lighthouse.jpg" },
        { img: "static/img/Penguins.jpg" },
        { img: "static/img/Tulips.jpg" }
      ],
      lists: [
        { name: "1" },
        { name: "2" },
        { name: "3" },
        { name: "4" },
        { name: "5" }
      ]
    };
  },
  filters: {
    // 返回日期格式化
    timeFun(date) {
      if (date == "") {
        return;
      } else {
        var y, m, d, h, f, s;
        var t = new Date(date);
        y = t.getFullYear();
        m = t.getMonth() + 1;
        d = t.getDate();
        h = t.getHours();
        f = t.getMinutes();
        return (
          y +
          "." +
          (m < 10 ? "0" + m : m) +
          "." +
          (d < 10 ? "0" + d : d) +
          "  " +
          (h < 10 ? "0" + h : h) +
          ":" +
          (f < 10 ? "0" + f : f)
        );
      }
    },
    numFun(val) {
      if (val == 0) {
        return val;
      } else {
        if (val) {
          return val;
        } else {
          return 0;
        }
      }
    },
    contentFun(val) {
      return val;
      //   if (val) {
      //     if (val.length > 30) {
      //       val = val.substring(0, 30);
      //       val = val + "...";
      //       return val;
      //     } else {
      //       return val;
      //     }
      //   } else {
      //     return "无";
      //   }
    },
    imgFun(val) {
      if (val) {
        return val;
      } else {
        return "/static/img/ren.png";
      }
    },
    strFun(val) {
      if (val) {
        return val;
      } else {
        return "无";
      }
    }
  },
  created: function() {
    var self = this;
  },
  beforeDestroy: function() {},
  watch: {},
  methods: {
    newsLiClick(index) {
      this.$router.push({
        path: "/lookNews"
      });
    },
    ...mapActions([""])
  }
};
</script>
<style scoped>
.contentLi {
  width: 100%;
  height: 10rem;
  background-color: #fff;
  margin-top: 0.6rem;
  margin-bottom: 0.3rem;
}
.swipe-contnt img {
  width: 100%;
  height: 100%;
}
.swipe-contnt {
  width: 100%;
  height: 100%;
  background-color: #fff;
  line-height: 15.227rem;
}
.home-swipe {
  width: 100%;
  height: 15.227rem;
}

.home-content {
  height: calc(100vh - 8rem - 15.227rem);
  overflow-y: scroll;
  overflow-x: hidden;
}
.news {
  background-color: #f7f7f7 !important;
  overflow-x: hidden;
  height: calc(100vh - 8rem);
  width: 100%;
  overflow-y: hidden;
}
</style>